.home-title{
  margin: 60px auto;
  color: #fff;
  width: 800px;
  height: 150px;
  position: relative;
  font-size: 36px;

  p{
    margin: 10px;
  }
}

.example{
  padding: 20px;
  flex-wrap: wrap;
  .qd{
    font-size: 12px;
  }
}

.mask-box {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: 2px dashed #cd0000;
  box-sizing: border-box;
}

// mask CSS遮罩,露出遮罩透明的部分
@supports (-webkit-mask: none) or (mask: none) {
  .mask-box {
    border: none;
    background: linear-gradient(to bottom, #34538b, #cd0000) no-repeat;
    -webkit-mask-image: linear-gradient(to right, #000 6px, transparent 6px),
    linear-gradient(to bottom, #000 6px, transparent 6px),
    linear-gradient(to right, #000 6px, transparent 6px),
    linear-gradient(to bottom, #000 6px, transparent 6px);
    -webkit-mask-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
    -webkit-mask-position: 0 0, 0 0, 0 100%, 100% 0;
    -webkit-mask-size: 8px 2px, 2px 8px, 8px 2px, 2px 8px;
    mask-image: linear-gradient(to right, #000 6px, transparent 6px) repeat-x,
    linear-gradient(to bottom, #000 6px, transparent 6px) repeat-y,
    linear-gradient(to right, #000 6px, transparent 6px) repeat-x 0 100%,
    linear-gradient(to bottom, #000 6px, transparent 6px) repeat-y 100% 0;
    mask-size: 8px 2px, 2px 8px, 8px 2px, 2px 8px;
  }
}

.item-box {
  display: inline-block;
  margin: 10px;
  width: 300px;
  height: 130px;

  .item {
    width: 100%;
    height: 100%;
    padding: 10px;

    p{
      text-align: left;
      font-size: 12px;
    }
  }

}

// 滚动虚框的效果
.move-dashed{
  padding: 2px;
  background: repeating-linear-gradient(135deg, transparent, transparent 3px, #7a2880 3px, #e4dbdb 8px);
  animation: shine 1s infinite linear;
  overflow: hidden;

  .item{
    background-color: #52C1BC;
  }
  @keyframes shine {
    0% { background-position: -1px -1px;}
    100% { background-position: -12px -12px;}
  }
}

// 水果周围的选框的效果
.move-anomalous{
  background: url("../imgs/selection.gif") repeat repeat;
  width: 300px;
  height: 84px !important;
  overflow: hidden;
  position: relative;
  img{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
}

// 实线边框loading动画
.move-part{
  position: relative;
  &:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border: 2px solid #cd0000;
    border-radius: 20px;
    animation: borderAround 2s infinite linear;
  }
  &:after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border: 2px solid #cd0000;
    animation: borderAround 2s 1s infinite linear;
    transition: border 1s;
  }
  @keyframes borderAround {
  /* top right bottom left 分别指最终剪裁可见区域的上边，右边，下边与左边。
     而所有的数值都表示位置，且是相对于原始元素的左上角而言的*/
    0%, 100% { clip: rect(0 300px 2px 0); }
    25% { clip: rect(0 300px 130px 298px); }
    50% { clip: rect(128px 300px 130px 0); }
    75% { clip: rect(0 2px 130px 0); }
  }
}


//渐变动画border
.gradient-border {
  background: #b5b3b3;
  --borderWidth: 3px;
  position: relative;
  border-radius: var(--borderWidth);

  &:after {
    content: '';
    position: absolute;
    top: calc(-1 * var(--borderWidth));
    left: calc(-1 * var(--borderWidth));
    height: calc(100% + var(--borderWidth) * 2);
    width: calc(100% + var(--borderWidth) * 2);
    background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
    border-radius: calc(2 * var(--borderWidth));
    z-index: -1;
    animation: animatedgradient 3s ease alternate infinite;
    background-size: 300% 300%;
  }

  @keyframes animatedgradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

}


.aaa{
  align-self:center;
  background:transparent;
  padding:1rem 1rem;
  margin:0 1rem;
  transition:all .5s ease;
  color:#41403E;
  font-size:2rem;
  letter-spacing:1px;
  outline:none;
  box-shadow: 20px 38px 34px -26px hsla(0,0%,0%,.2);
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  /*
  Above is shorthand for:
  border-top-left-radius: 255px 15px;
  border-top-right-radius: 15px 225px;
  border-bottom-right-radius: 225px 15px;
  border-bottom-left-radius:15px 255px;
  */
  &:hover{
    box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
  }
  &.lined.thick{
    border:solid 7px #41403E;
  }
  &.dotted.thick{
    border:dotted 5px #41403E;
  }
  &.dashed.thick{
    border:dashed 5px #41403E;
  }
  &.lined.thin{
    border:solid 2px #41403E;
  }
  &.dotted.thin{
    border:dotted 2px #41403E;
  }
  &.dashed.thin{
    border:dashed 2px #41403E;
  }
}



$bg-color: #343642;
$accent-color: #962d3e;
$border-width: 2px;
$padding-width: 2px;
$corner-size: 10px;

.btn--corners {
  position: relative;
  padding: $padding-width;
  font-size: 18px;
  text-align: center;
  vertical-align: top;
  font-weight: 400;
  border: $border-width solid $accent-color;

  &:before, &:after{
    content: "";
    position: absolute;
    background-color: #52C1BC;
    z-index: 0;
    transition: 200ms ease-in;
    transform-origin: center center;
  }
  &:before {
    width: calc(100% + #{$border-width} * 2 - #{$corner-size});
    height: calc(100% + #{$border-width} * 2);
    top: -$border-width;
    left: calc(50% - 1px);
    transform: translateX(-50%);
  }
  &:after {
    height: calc(100% + #{$border-width} * 2 - #{$corner-size});
    width: calc(100% + #{$border-width});
    left: -1px;
    top: 50%;
    transform: translateY(-50%);
  }
  &:hover::before {
    width: 0;
  }
  &:hover::after {
    height: 0;
  }
}


//Colors
$background: #fefefe;
$text: #4b507a;

$cyan: #60daaa;
$yellow: #fbca67;
$orange: #ff8a30;
$red: #f45e61;
$purple: #6477b9;
$blue: #0eb7da;

// Basic styles
.btn-hover {
  background: none;
  border: 0;
  box-sizing: border-box;
  margin: 1em;
  padding: 1em 2em;

  // Using inset box-shadow instead of border for sizing simplicity
  box-shadow: inset 0 0 0 2px $red;
  color: $red;
  font-size: inherit;
  font-weight: 700;

  // Required, since we're setting absolute on pseudo-elements
  position: relative;
  vertical-align: middle;

  &::before,
  &::after {
    box-sizing: inherit;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
  }
}

.draw {
  transition: color 0.25s;

  &::before,
  &::after {
    // Set border to invisible, so we don't see a 4px border on a 0x0 element before the transition starts
    border: 2px solid transparent;
    width: 0;
    height: 0;
  }

  // This covers the top & right borders (expands right, then down)
  &::before {
    top: 0;
    left: 0;
  }

  // And this the bottom & left borders (expands left, then up)
  &::after {
    bottom: 0;
    right: 0;
  }

  &:hover {
    color: $cyan;
  }

  // Hover styles
  &:hover::before,
  &:hover::after {
    width: 100%;
    height: 100%;
  }

  &:hover::before {
    border-top-color: $cyan; // Make borders visible
    border-right-color: $cyan;
    transition:
            width 0.25s ease-out, // Width expands first
            height 0.25s ease-out 0.25s; // And then height
  }

  &:hover::after {
    border-bottom-color: $cyan; // Make borders visible
    border-left-color: $cyan;
    transition:
            border-color 0s ease-out 0.5s, // Wait for ::before to finish before showing border
            width 0.25s ease-out 0.5s, // And then exanding width
            height 0.25s ease-out 0.75s; // And finally height
  }
}

// Inherits from .draw
.meet {

  &:hover {
    color: $yellow;
  }

  // Start ::after in same position as ::before
  &::after {
    top: 0;
    left: 0;
  }

  // Change colors
  &:hover::before {
    border-top-color: $yellow;
    border-right-color: $yellow;
  }

  &:hover::after {
    border-bottom-color: $yellow;
    border-left-color: $yellow;
    transition: // Animate height first, then width
            height 0.25s ease-out,
            width 0.25s ease-out 0.25s;
  }

}

// Does not inherit
.center {
  &:hover {
    color: $purple;
  }

  // Set up base styles, we're going to scale instead of animating width/height
  &::before,
  &::after {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transform-origin: center; // Ensure scaling is done from the center (expands outwards)
  }

  // scale3d(<scale-horizontal>, <scale-vertical>, <scale-depth>);
  &::before {
    border-top: 2px solid $purple;
    border-bottom: 2px solid $purple;
    transform: scale3d(0,1,1); // Shrink only width
  }

  &::after {
    border-left: 2px solid $purple;
    border-right: 2px solid $purple;
    transform: scale3d(1,0,1); // Shrink only height
  }

  &:hover::before,
  &:hover::after {
    transform: scale3d(1,1,1); // Show full-size
    transition: transform 0.5s;
  }
}

// Border spins around element
// ::before holds three borders that appear separately, one at a time
// ::after holds one border that spins around to cover ::before's borders, making their appearance seem smooth

.spin {
  width: 5em;
  height: 5em;
  padding: 0;

  &:hover {
    color: $blue;
  }

  &::before,
  &::after {
    top: 0;
    left: 0;
  }

  &::before {
    border: 2px solid transparent; // We're animating border-color again
  }

  &:hover::before {
    border-top-color: $blue; // Show borders
    border-right-color: $blue;
    border-bottom-color: $blue;

    transition:
            border-top-color 0.15s linear, // Stagger border appearances
            border-right-color 0.15s linear 0.10s,
            border-bottom-color 0.15s linear 0.20s;
  }

  &::after {
    border: 0 solid transparent; // Makes border thinner at the edges? I forgot what I was doing
  }

  &:hover::after {
    border-top: 2px solid $blue; // Shows border
    border-left-width: 2px; // Solid edges, invisible borders
    border-right-width: 2px; // Solid edges, invisible borders
    transform: rotate(270deg); // Rotate around circle
    transition:
            transform 0.4s linear 0s,
            border-left-width 0s linear 0.35s; // Solid edge post-rotation
  }
}

.circle {
  border-radius: 100%;
  box-shadow: none;

  &::before,
  &::after {
    border-radius: 100%;
  }
}

.thick {
  color: $red;

  &:hover {
    color: #fff;
    font-weight: 700;
  }

  &::before {
    border: 2.5em solid transparent;
    z-index: -1;
  }

  &::after {
    mix-blend-mode: color-dodge;
    z-index: -1;
  }

  &:hover::before {
    background: $red;
    border-top-color: $red;
    border-right-color: $red;
    border-bottom-color: $red;
    transition:
            background 0s linear 0.4s,
            border-top-color 0.15s linear,
            border-right-color 0.15s linear 0.15s,
            border-bottom-color 0.15s linear 0.25s;
  }

  &:hover::after {
    border-top: 2.5em solid $red;
    border-left-width: 2.5em;
    border-right-width: 2.5em;
  }
}